<template>
    <el-dialog
    :visible.sync="isShowDialog"
    :open="openDialog"
    :close="handleClose"
    :title="isFlag?'新增':'编辑'"
    width="50%"
    :close-on-click-modal="false">
        <el-form
            ref="licenseRef"
            :model="licenseForm"
            label-width="110px"
            :rules="rules">
            <el-form-item label="系统唯一编号" prop="sysIdentification">
                <el-input v-model="licenseForm.sysIdentification" placeholder="请输入系统唯一编号" clearable :disabled="!flag"></el-input>
            </el-form-item>
            <el-form-item label="系统环境" prop="environmentId">
                <el-select v-model="licenseForm.environmentId" placeholder="请选择系统环境信息" style="width: 100%;" clearable :disabled="!flag">
                    <el-option
                        v-for="(item, index) in environmentList"
                        :key="index"
                        :label="item.name"
                        :value="item.rowId"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户信息" prop="customerId">
                <el-select v-model="licenseForm.customerId" placeholder="请选择客户信息" style="width: 100%;" clearable :disabled="!flag">
                    <el-option
                        v-for="(item, index) in customerList"
                        :key="index"
                        :label="item.companyName"
                        :value="item.rowId"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证书类型" prop="type">
                <el-radio-group v-model="licenseForm.type" @change="typeChange">
                    <el-radio label="0">试用</el-radio>
                    <el-radio label="1">正式</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="有效时间" prop="effectiveDay">
                <el-select v-model="licenseForm.effectiveDay" placeholder="请选择有效时间" style="width: 100%;" clearable>
                    <el-option
                        v-for="(item, index) in effectiveDayList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
/**
* @description: 新增编辑
* @create: 2020-09-01
* @author: niuwenli
*/
export default {
    name: 'licenseOperate',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        // 新增还是编辑
        flag: {
            type: Boolean,
            default: false
        },
        // 编辑数据
        updateData: {
            type: Object,
            default: () => {}
        }
    },
    components: {},
    data () {
        return {
            licenseForm: {
                sysIdentification: '',
                environmentId: '',
                customerId: '',
                type: '0',
                effectiveDay: ''
            },
            rules: {
                sysIdentification: [{ required: true, message: '请输入系统唯一编号',  trigger: 'blur' }],
                environmentId: [{ required: true, message: '请输入系统环境编号',  trigger: 'blur' }],
                customerId: [{ required: true, message: '请输入客户编号',  trigger: 'blur' }],
                type: [{ required: true, message: '请选择证书类型',  trigger: 'change' }],
                effectiveDay: [{ required: true, message: '请选择有效时间',  trigger: 'change' }]
            },
            isShowDialog: false,
            isFlag: false,
            url: '',
            method: '',
            // 系统环境数据
            environmentList: [],
            // 客户数据
            customerList: [],
            // 有效时间数据
            effectiveDayList: [
                {
                    name: '30天',
                    code: 30
                },
                {
                    name: '60天',
                    code: 60
                },
                {
                    name: '90天',
                    code: 90
                },
                {
                    name: '120天',
                    code: 120
                }
            ]
        };
    },
    created () {
        this.querySysEnvironInfo();
        this.queryCustomerInfo();
    },
    watch: {
        value (val) {
            this.isShowDialog = val;
        },
        flag (val) {
            this.isFlag = val;
        },
        updateData (val) {
            if (val) {
                this.licenseForm = val;
            }
        }
    },
    methods: {
        // 验证有效时间
        // validTime (rule, value, callback) {
        //     const reg = /^[1-9][0-9]*$/;
        //     if (!value) {
        //         callback('请输入有效时间');
        //     } else {
        //         if (!reg.test(value)) {
        //             callback('请输入大于0的数字');
        //         } else {
        //             callback();
        //         }
        //     }
        // },
        // 类型改变
        typeChange (value) {
            this.licenseForm.effectiveDay = value === '1' ? 1000000 : '';
        },
        openDialog () {},
        // 关闭
        handleClose () {
            this.$emit('input', false);
            this.$refs.licenseRef.resetFields();
        },
        // 保存
        handleConfirm () {
            this.$refs.licenseRef.validate(valid => {
                if (!valid) return;
                if (this.isFlag) {
                    // 新增
                    this.url = `${this.baseUrl}license`;
                    this.method = 'post';
                } else {
                    // 编辑
                    this.url = `${this.baseUrl}license/${this.licenseForm.rowId}`;
                    this.method = 'put';
                }
                this.$axios({
                    url: this.url,
                    method: this.method,
                    data: this.licenseForm
                }).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.$emit('success');
                    this.handleClose();
                });
            });
        },
        // 查询所有系统环境信息
        querySysEnvironInfo () {
            this.$axios.get(`${this.baseUrl}sys_environment`).then(res => {
                this.environmentList = res.data.data;
            }).catch(() => {});
        },
        // 查询所有客户信息
        queryCustomerInfo () {
            this.$axios.get(`${this.baseUrl}customer`).then(res => {
                console.log(res);
                this.customerList = res.data.data;
            }).catch(() => {});
        }
    }
};
</script>
<style>

</style>